<template>
	<view>
		<custom-head title="九宫格抽奖" :isIcon="true" :navStyle="navStyle"></custom-head>
		<view class="content">
			<view class="lottery-box">
				<view class="start" @click="startLottery">开始抽奖</view>
				<view class="ul">
					<view v-for="(item,i) in itemList" :class="['li', { 'li-on': i == index }]" >{{item.value}} id:{{item.id}}</view>
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	import customHead from '@/components/custom_head.vue'
	export default{
		components:{ customHead },
		data(){
			return {
				navStyle:{
					background: 'radial-gradient(49% 160%, #22b5ff 0, #3a72fa 100%)',
					color: '#fff',
					fontSize: '34rpx'
				},
				itemList:[
					{value:'第一个', id: 1},
					{value:'第二个', id: 2},
					{value:'第三个', id: 3},
					{value:'第四个', id: 4},
					{value:'第五个', id: 5},
					{value:'第六个', id: 6},
					{value:'第七个', id: 7},
					{value:'第八个', id: 8},
				],
				index: -1,  	// 当前转动到哪个位置，起点位置
				count: 8,  		// 总共有多少个位置
				timer: null,  	// 转动定时器
				speed: 200,  	// 初始转动速度
				times: 0,    	// 转动次数
				cycle: 50,   	// 转动基本次数：即至少需要转动多少次再进入抽奖环节
				prize: -1,   	// 中奖位置
				click: true,
				showToast: false, //显示中奖弹窗
				
				lotteryTimer:null,	// 默认旋转定时器
			}
		},
		mounted() {
			this.automatic()  // 默认转动效果
		},
		methods:{
			automatic(){
				this.lotteryTimer = setInterval(() => {
					this.oneRoll()
				}, 700)
			},
			
			
			startLottery(){
				if (!this.click) { return }
				this.startRoll(); 
				this.click = false					// 防止重复点击
				clearInterval(this.lotteryTimer);	// 清除默认转动定时器
				this.lotteryTimer = null
			},		
			
			startRoll () {
				this.times += 1 // 记录转动次数
				this.oneRoll() 	// 记录 index 的位置
				
				if (this.times > this.cycle + 10 && this.prize === this.index) {
					clearTimeout(this.timer)
					this.timer = null
					this.prize = -1
					this.times = 0
					this.speed = 200
					this.click = true;			// 请求接口时 若接口报错 在报错里面将 click 恢复默认 
					// 防止中奖位置不准确
					setTimeout(()=>{
						this.showToast = true;		// 中奖的弹窗
						alert(`id:${this.itemList[this.index].id}中奖了`)
						setTimeout(()=>{
							this.automatic()
						},1000)
					},500)
				} else {
					if (this.times < this.cycle) {
						this.speed -= 10			// 加快转动速度
					} else if (this.times === this.cycle) {
						setTimeout(() => {													// 模拟接口请求 2s 后返回数据
							const index = this.$util.random(this.count)   					// 模拟中奖商品的id
							this.prize = this.itemList.findIndex(x => x.id == index);		// 通过id获取中奖商品下标
						},2000)
					} else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
						this.speed += 110
					} else {
						this.speed += 20
					}
					if (this.speed < 40) {this.speed = 40}
					this.timer = setTimeout(this.startRoll, this.speed)
				}
			},
			// 每次转动记录 index 的位置
			oneRoll () {
				let index = this.index 
				const count = this.count 
				index += 1
				if (index > count - 1) { index = 0 }
				this.index = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{font-size: 0;min-height: calc(100vh - 88rpx);display: flex;align-items: center;justify-content: center;user-select:none}
	.lottery-box{width: 700rpx;height: 700rpx;background: red;position: relative;padding: 12rpx;box-sizing: border-box;border-radius: 6rpx;background: radial-gradient(49% 160%, #22b5ff 0, #3a72fa 100%);
		.start{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 31%;height: 31%;background: #fff;z-index: 6;border-radius: 12rpx;display: flex;align-items: center;justify-content: center;font-size: 34rpx;background: #ff3a59;color: #fff;box-shadow: inset 0 -4px 0 0 #ea0125;
			&:active{opacity: .7;}
		}
		.ul{width: 100%;height: 100%;position: relative;
			.li{width: 32%;height: 32%;background: #fff;position: absolute;color: #708ABF;font-size: 32rpx;display: flex;align-items: center;justify-content: center;border-radius: 12rpx;box-shadow: inset 0 -4px 0 0 #9cd2ff;
				&-on{background: #ff3a59;color: #fff;box-shadow: inset 0 -4px 0 0 #ea0125;}
				&:nth-child(1){top: 0;left: 0;}
				&:nth-child(2){top: 0;left: 50%;transform: translateX(-50%);}
				&:nth-child(3){top: 0;right: 0;}
				&:nth-child(4){top: 50%;transform: translateY(-50%);right: 0;}
				&:nth-child(5){bottom: 0;right: 0;}
				&:nth-child(6){bottom: 0;left: 50%;transform: translateX(-50%);}
				&:nth-child(7){left: 0;bottom: 0;}
				&:nth-child(8){left: 0;top: 50%;transform: translateY(-50%);}
			}
		}
	}
</style>
